
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>

    .el-step__title {
        font-size: 8px;
        line-height: 16px;
    }

    .title-str {
        FONT-SIZE: 13pt;
        font-weight: bold;
        MARGIN: 5px;
        TEXT-ALIGN: center;
        COLOR: #303030;
    }

    .title2-str {
        FONT-SIZE: 10pt;
        font-weight: bold;
        MARGIN: 5px;
        TEXT-ALIGN: left;
        COLOR: #303030;
    }
    .title3-str {
        FONT-SIZE: 10pt;
        font-weight: bold;
        MARGIN: 5px;
        TEXT-ALIGN: left;
        COLOR: #ff7716;
    }
    .title4-str {
        FONT-SIZE: 10pt;
        font-weight: bold;
        MARGIN: 5px;
        TEXT-ALIGN: left;
        COLOR: #1987ff;
    }

    .el-input__inner {
        FONT-SIZE: 8pt;
    }
    /*.el-step__title.is-process {*/
        /*font-weight: 700;*/
        /*color: #ff2714;*/
    /*}*/

    [v-cloak] {
        /*display: none !important;*/
        display: none !important; !important;
    }

</style>

<div id="configIndex" v-cloak>
    <el-row>
        <el-col :span="8"><div>&nbsp;</div></el-col>
        <el-col :span="8"><div class="title-str">新增代理</div></el-col>
        <el-col :span="8"><div>&nbsp;</div></el-col>
    </el-row>
    <el-row>
        <el-col :span="5"><div class="title2-str">上級代理:</div></el-col>
        <el-col :span="4"><div class="title3-str">{{pagentname}}</div></el-col>
        <el-col :span="15"><div>&nbsp;</div></el-col>
    </el-row>

    <el-steps :active="active" finish-status="success" align-center style="margin: 10px">
        <el-step title="代理信息" description=""></el-step>
        <el-step title="占成" description=""></el-step>
        <el-step title="首通厅盘口(限红)" description=""></el-step>
        <el-step title="VIP厅盘口(限红)" description=""></el-step>
        <el-step title="确认" description=""></el-step>
    </el-steps>

    <div  v-show="active == 0">

        <el-row style="margin-bottom: 10px">
            <el-col :span="7"><div class="title2-str">帳號生成方式</div></el-col>
            <el-col :span="3"><div class="title4-str">手动</div></el-col>
            <el-col :span="3">
                <el-switch
                    v-model="szvalue"
                    active-color="#13ce66"
                    @change="handleChange"
                    inactive-color="#ff4949">
                </el-switch>
            </el-col>
            <el-col :span="3"><div class="title3-str">自动</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
            <el-col :span="5"><div class="title2-str">帳號</div></el-col>
            <el-col :span="19"><el-input v-model="wjzh" placeholder="4-16个字符(可包含大小写英文字母，数字或下划线)"></el-input></el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
            <el-col :span="5"><div class="title2-str">備註名稱</div></el-col>
            <el-col :span="19"><el-input v-model="bzmc" placeholder="1-20个字符"></el-input></el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
            <el-col :span="5"><div class="title2-str">密碼</div></el-col>
            <el-col :span="19"><el-input v-model="mima" placeholder="8-12字符，必须为大写字母、小写字母、数字和符号的组合,不能包
    空格" show-password></el-input></el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
            <el-col :span="5"><div class="title2-str">重复密碼</div></el-col>
            <el-col :span="19"><el-input v-model="mima2" placeholder="8-12字符，必须为大写字母、小写字母、数字和符号的组合,不能包
    空格" show-password></el-input></el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
            <el-col :span="5"><div class="title2-str">備註</div></el-col>
            <el-col :span="19"><el-input v-model="bzinfo" placeholder=""></el-input></el-col>
        </el-row>

    </div>

    <div  v-show="active == 1">

        <el-row style="margin-bottom: 10px">
            <el-col :span="9"><div class="title2-str">真人遊戲 占成 (&nbsp;<={{game1_proportion_max}}&nbsp;)</div></el-col>
            <el-col :span="15"><el-input v-model="game1_proportion" placeholder="需为整数"></el-input></el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
            <el-col :span="9"><div class="title2-str">真人遊戲 洗碼比 (&nbsp;<={{game1_refund_max}}&nbsp;)</div></el-col>
            <el-col :span="15"><el-input v-model="game1_refund" placeholder=""></el-input></el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
            <el-col :span="9"><div class="title2-str">电子棋牌 占成</div></el-col>
            <el-col :span="15"><el-input v-model="game2_proportion" placeholder="需为整数" :disabled="true"></el-input></el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
            <el-col :span="9"><div class="title2-str">电子棋牌 洗碼比</div></el-col>
            <el-col :span="15"><el-input v-model="game2_refund" placeholder="" :disabled="true"></el-input></el-col>
        </el-row>

    </div>

    <div  v-show="active == 2" style="margin-top: 20px;">
        <el-row>
            <el-col :span="8"><div class="title2-str">请选择普通盘口(限红):</div></el-col>
            <el-col :span="16"><div>&nbsp;</div></el-col>
        </el-row>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="50">
            </el-table-column>
            <el-table-column
                    label="盘口名称(限红)"
                    prop="name"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="high"
                    label="上限"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="low"
                    label="下限"
                    width="80">
            </el-table-column>
        </el-table>
        <!--<div style="margin-top: 20px">-->
            <!--&lt;!&ndash;<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-button @click="toggleSelection()">取消选择</el-button>&ndash;&gt;-->
        <!--</div>-->
    </div>

    <div  v-show="active == 3" style="margin-top: 20px;">
        <el-divider></el-divider>
        <el-row>
            <el-col :span="10">
                <el-descriptions class="margin-top" title="代理信息" :column="1" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            代理账号
                        </template>
                        {{wjzh}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            备注名称
                        </template>
                        {{bzmc}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            密码
                        </template>
                        {{mima}}
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
            <el-col :span="1">
                &nbsp;
            </el-col>
            <el-col :span="13">
                <el-descriptions class="margin-top" title="占成" :column="1" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            真人游戏 占成
                        </template>
                        {{game1_proportion}}%
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            真人游戏 洗码比
                        </template>
                        {{game1_refund}}%
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            电子棋牌 占成
                        </template>
                        {{game2_proportion}}%%
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            电子棋牌 洗码比
                        </template>
                        {{game2_refund}}%
                    </el-descriptions-item>

                </el-descriptions>
            </el-col>
        </el-row>

        <el-divider></el-divider>
        <el-row>
            <el-col :span="10"><div class="title2-str">普通盘口(限红):</div></el-col>
            <el-col :span="14"><div>&nbsp;</div></el-col>
        </el-row>

        <el-table
                ref="multipleTable2"
                :data="multipleSelection"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    label="盘口名称(限红)"
                    prop="name"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="low"
                    label="下限"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="high"
                    label="上限"
                    width="80">
            </el-table-column>
        </el-table>

    </div>

    <div  v-show="active == 4" style="margin-top: 40px; margin-bottom: 40px;">
        <el-row style="margin-top: 10px">
            <el-col :span="5"><div class="title2-str">操作者密码</div></el-col>
            <el-col :span="14"><el-input v-model="czmima" placeholder="8-12字符，必须为大写字母、小写字母、数字和符号的组合,不能包
    空格" show-password></el-input></el-col>
            <el-col :span="5"><div>&nbsp;</div></el-col>
        </el-row>
    </div>

    <el-row style="margin-top: 20px;">
        <el-col :span="3"><div>&nbsp;</div></el-col>
        <el-col :span="8"><el-button  @click="back" v-show="active > 0" >&nbsp;&nbsp;&nbsp;&nbsp;上一步&nbsp;&nbsp;&nbsp;&nbsp;</el-button></el-col>
        <el-col :span="2"><div>&nbsp;</div></el-col>
        <el-col :span="8"><el-button @click="next" type="warning" >&nbsp;&nbsp;&nbsp;&nbsp;{{nexttitle}}&nbsp;&nbsp;&nbsp;&nbsp;</el-button></el-col>
        <el-col :span="3"><div>&nbsp;</div></el-col>
    </el-row>

</div>


<script>
    var WSdata = {
        agentself: {:json_encode($agentself)},
    };

</script>